<template>
	<view style="background-color: aliceblue;">
		<!-- 顶部导航 -->
		<view class="top" :style="{ height: topHeight + 'px' }">
			<view class="top-item" @click="returns()">
				<image src="/static/ret.png" alt="" />
				<text>科室列表</text>
			</view>
		</view>

		<view class="white" style="display: flex;">
			<view class="blueline"></view>
			<!-- 左侧菜单 -->
			<view class="left">
				<view v-for="(item, index) in departments" :key="index" class="font"
					:class="{'active': activeIndex === index}" @click="cli(index)">
					{{ item.name }}
				</view>
			</view>

			<!-- 右侧内容 -->
			<view class="right">
				<view v-for="(child, index) in currentChildren" :key="index" class="right-item"
					@click="goToDetailPage(child.name, child.id)">
					{{ child.name }}
					<image class="arrow-icon" src="/static/右箭头 (1).png" alt="Arrow" />
				</view>
				<view v-if="currentChildren.length === 0" class="right-item">
					暂无数据
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	// 响应式数据
	const departments = ref([]); // 科室列表
	const activeIndex = ref(0); // 当前激活的科室索引
	const currentChildren = ref([]); // 当前科室的子科室
	const topHeight = ref(0); // 用于存储动态计算的top高度

	// 在组件挂载时获取设备信息
	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		const navBarHeight = systemInfo.statusBarHeight; // 获取状态栏的高度
		topHeight.value = navBarHeight + 44; // 导航栏高度加50px
		console.log('导航栏高度:', navBarHeight);
		console.log('动态计算的top高度:', topHeight.value);
	});
	// 获取数据
	const fetchDepartments = async () => {
		try {
			const res = await uni.request({
				url: 'https://yiliao.kuxia.top/app/Depart/index', // 替换为实际接口
				method: 'POST',
				data: {},
			});

			console.log("请求响应数据:", res); // 打印响应数据，检查结构

			// 确保数据结构正确
			if (res.data && res.data.code === 1 && Array.isArray(res.data.data)) {
				departments.value = res.data.data; // 正确获取部门列表
				updateRightContent(0); // 默认显示第一个科室的子项
			} else {
				console.error("数据格式不正确", res.data);
			}
		} catch (error) {
			console.error("Error fetching data:", error);
		}
	};

	// 初始化请求
	onMounted(() => {
		fetchDepartments();
	});

	// 切换左侧菜单
	const cli = (index) => {
		activeIndex.value = index; // 更新 activeIndex，确保高亮
		updateRightContent(index); // 更新右侧内容
	};

	// 更新右侧内容
	const updateRightContent = (index) => {
		const children = departments.value[index]?.childrens || [];
		currentChildren.value = children; // 确保更新 right 内容
	};

	// 返回上一页
	const returns = () => {
		uni.reLaunch({
			url: '/pages/home/home'
		})
	};

	// 存储点击的科室信息并跳转到详情页
	const goToDetailPage = (childName, childId) => {
		// 存储当前点击的科室信息
		uni.setStorage({
			key: 'selectedDepartment',
			data: {
				name: childName,
				id: childId
			},
			success: () => {
				console.log('科室信息存储成功');
			},
			fail: (err) => {
				console.error('存储失败', err);
			}
		});

		// 跳转到详情页面
		uni.reLaunch({
			url: `/pages/date/date?name=${childName}&id=${childId}`, // 通过 query 参数传递
		});
	};
</script>

<style scoped>
	/* 顶部样式 */
	.top {
		background-color: #00daca;
		width: 100%;
		height: 5rem;
		color: white;
		font-size: 21px;
		line-height: 3rem;
		font-weight: 600;
		display: flex;
		align-items: center;
		padding-left: 15px;
	}

	.top-item {
		display: flex;
		align-items: center;
		margin-top: 30px;
	}

	.top-item image {
		width: 16px;
		height: 16px;
		margin-right: 10px;
	}

	.left {
		width: 25%;
		background-color: white;
		border-radius: 10px;
		padding-top: 5px;
	}

	.right {
		width: 68%;
		background-color: white;
		margin-left: 1%;
		margin-top: 7px;
		border-radius: 10px;
		padding: 10px;
	}

	.font {
		text-align: left;
		padding: 10px;
		cursor: pointer;
	}

	.font.active {
		font-weight: bold;
		color: #3861ed;
		/* 高亮显示样式 */
	}

	.right-item {
		display: flex;
		justify-content: space-between;
		padding: 7px;
		cursor: pointer;
	}

	.arrow-icon {
		width: 12px;
		height: 12px;
		margin-right: 10px;
	}

	.separator {
		border: 0;
		border-top: 1px solid #dedede;
		margin: 5px 0;
	}
</style>